<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <el-row :gutter="24">

          <el-col :span="8">
            <div ref="line1" class="className" :style="{height:height,width:width}" />
            <div style="text-align: center">来料质检单</div>
          </el-col>
          <el-col :span="8">
            <div ref="line2" class="className" :style="{height:height,width:width}" />
            <div style="text-align: center">销售质检单</div>
          </el-col>
          <el-col :span="8">
            <div ref="line3" class="className" :style="{height:height,width:width}" />
            <div style="text-align: center">生产质检单</div>
          </el-col>
      </el-row>
    </el-card>
    <el-row style="margin-top: 10px">
      <el-card>
        <div ref="bar1" class="className" style="height:350px;width:100%" />
      </el-card>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/dark') // echarts theme
require('echarts/theme/vintage') // echarts theme
require('echarts/theme/macarons') // echarts theme
require('echarts/theme/infographic') // echarts theme
require('echarts/theme/shine') // echarts theme
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      className: 'chart',
      width: '100%',
      height: '150px',
      chart: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart1 = echarts.init(this.$refs.line1, 'macarons')
      this.chart2 = echarts.init(this.$refs.line2, 'macarons')
      this.chart3 = echarts.init(this.$refs.line3, 'macarons')
      this.chart4 = echarts.init(this.$refs.bar1, 'shine')
      this.setOptions1()
      this.setOptions2()
      this.setOptions3()
      this.setOptions()
    },
    setOptions() {
      this.chart4.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })
    },
    setOptions2() {
      this.chart2.setOption({
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: '待质检数量'
              },
              {
                value: 234,
                name: '已质检数量'
              }
            ]
          }
        ]
      })
    },
    setOptions1() {
      this.chart1.setOption({
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: '待质检数量'
              },
              {
                value: 234,
                name: '已质检数量'
              }
            ]
          }
        ]
      })
    },
    setOptions3() {
      this.chart3.setOption({
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: '待质检数量'
              },
              {
                value: 234,
                name: '已质检数量'
              }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
